<template>
  <div>
    <div class="p-6">
      <a-button type="primary">Primary Button</a-button>

      <div class="flex flex-nowrap text-white pt-6">
        <div class="flex-1 bg-main-100">100</div>
        <div class="flex-1 bg-main-300">300</div>
        <div class="flex-1 bg-main-500">500</div>
        <div class="flex-1 bg-main-700">700</div>
        <div class="flex-1 bg-main-900">900</div>
      </div>
    </div>
    <a-table
      id="atable"
      class="px-6 pb-6"
      bordered
      size="small"
      :locale="{ emptyText: '暂无数据' }"
      :data-source="state.data"
      :pagination="false"
      :scroll="{
        scrollToFirstRowOnChange: true,
        y: 200,
      }"
      rowKey="id"
    >
      <a-table-column key="name" title="姓名" data-index="name" />
      <a-table-column key="age" title="年龄" data-index="age" />
      <a-table-column key="address" title="地址" data-index="address" />
      <a-table-column key="tags" title="操作" data-index="tags" :width="80">
        <template #default="{ record }">
          <a @click="() => Edit(record)">编辑</a>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";

interface DataItem {
  id: number;
  name: string;
  age: number;
  address: string;
}

const data: DataItem[] = [];
for (let i = 0; i < 100; i++) {
  data.push({
    id: i + 1,
    name: `Edrward ${i + 1}`,
    age: 32,
    address: `London Park no. ${i + 1}`,
  });
}

const Edit = (record: any) => {
  console.log(record);
};

const state = reactive({
  data,
});
</script>
